<template>
  <div class="product_spec">
    <content-header>商品规格</content-header>
    <div class="container">
      <div class="body">
        <div class="search acea-row row-middle">
          规格搜索：
          <a-input-search style="width:400px;" placeholder="请输入规格" enter-button @search="(val)=>getList(val)" />
        </div>
        <div class="btn">
          <a-space>
            <a-button type="primary" @click="showModal"><a-icon type="plus"/>添加商品规格</a-button>
            <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="del(selectedIds)" >
              <a-button>批量删除</a-button>
            </a-popconfirm>
          </a-space>
        </div>
        <div class="table">
          <a-table :columns="columns" :pagination="pagination" :loading="loading" rowKey="id" :data-source="specData" :row-selection="{onChange:(e)=>selectedIds = e}" >
            <div slot="title" slot-scope="record">
              <template v-for="(item,index) in record.data">
                {{index>0?','+item.title:item.title}}
              </template>
            </div>
            <div slot="list" slot-scope="record">
              <div v-for="(item,index) in record.data" :key="index">
                <template v-for="(item2,index2) in item.list">
                  {{index2>0?','+item2:item2}}
                </template>
              </div>
            </div>
            <div slot="action" slot-scope="record" class="act acea-row row-middle">
              <a href="javascript:;" class="acea-row row-middle" @click="showModal(record.id)">编辑<p></p></a>
              <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="del(record.id)" >
                <a href="javascript:;" class="acea-row row-middle" >删除</a>
              </a-popconfirm>
            </div>
          </a-table>
        </div>
      </div>
    </div>
    <a-modal class="modal" title="添加商品规格" :visible="show" :width="800" @ok="ok" @cancel="show = false" >
      <a-form-model :model="form" ref="form">
        <a-form-model-item class="acea-row" label="标题名称" prop="name" required>
          <a-input style="width:500px" v-model="form.name" placeholder="请输入标题名称"></a-input>
        </a-form-model-item>
        <a-form-model-item class="acea-row" label="规格列表" v-if="specTmp.length != 0">
          <div class="content acea-row row-column" v-for="(item,index) in specTmp" :key="index">
            <div>{{item.title}}<a-icon class="icon" theme="filled" type="close-circle" @click="del_spec(index)" /></div>
            <div class="list acea-row">
              <div class="tag tag-dot acea-row row-middle" v-for="(tag,idx) in item.list" :key="idx">
                <div class="tag-dot-inner act" ></div>
                <div class="tag-text">{{tag}}</div>
                <div class="iconfont ivu-icon-ios-close" @click.stop="closeTag(tag,item.title)"></div>
              </div>
              <a-input-search placeholder="输入属性名称" style="width:200px;margin: 3px 0;" allowClear @search="(val)=>addType(val,item.title)">
                <a-button slot="enterButton" >添加</a-button>
              </a-input-search>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item >
          <a-button type="primary" v-if="!show_add_spec" @click="show_add_spec = true"><a-icon type="plus"  />添加新规格</a-button>
          <div v-else>
            <a-form-model layout="inline" ref="formSpec" :model="formSpec" >
              <a-form-model-item label="规格名称" prop="title" required>
                <a-input v-model="formSpec.title" placeholder="请输入规格名称"></a-input>
              </a-form-model-item>
              <a-form-model-item label="规格值" prop="val" required>
                <a-input v-model="formSpec.val" placeholder="请输入规格值"></a-input>
              </a-form-model-item>
              <a-form-model-item>
                <a-space>
                  <a-button type="primary" @click="addSpec">确定</a-button>
                  <a-button @click="close_add_spec">取消</a-button>
                </a-space>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import contentHeader from 'components/common/content-header'
import request from 'api/request'

const columns = [
  { title: 'id', width:100, key: 'id',dataIndex:'id' },
  { title: '规格名称', width:200, key: 'name',dataIndex:'name' },
  { title: '商品规格', width:200, key: 'title',scopedSlots: { customRender: 'title' }},
  { title: '商品属性', width:200, key: 'list',scopedSlots: { customRender: 'list' }},
  { title: '操作', width:200, key: 'action',scopedSlots: { customRender: 'action' }},
]

const pagination = {
  pageSize:10
}

export default {
  components:{
    contentHeader
  },
  data(){
    return{
      pagination,
      labelCol: { span: 3 },
      wrapperCol: { span: 15 },
      columns,
      specData:[],
      specTmp:[],
      show:false,
      show_add_spec:false,
      loading:false,
      mod:"add",
      selectedIds:'',
      form:{
        name:''
      },
      formSpec:{
        title:'',
        val:''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(keyword=""){
      const that = this
      this.loading = true
      request.get("/product/spec/list",{keyword}).then(e=>{
        if(e.status == 200){
          let specData = e.data
          for(let i of specData){
            i.data = JSON.parse(i.data)
          }
          that.specData = specData
          that.loading = false
        }
      })
    },
    ok(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          let specTmp = JSON.stringify(this.specTmp)
          let form = this.form
          let params = {
            name:form.name,
            data:specTmp
          }
          if(this.mod == "add"){
            request.post("/product/spec/add",params).then(e=>{
              if(e.status == 200){
                this.$message.success("操作成功")
                this.getList()
                this.show = false
              }
            })
          }else{
            params.id = form.id
            request.post("/product/spec/edit",params).then(e=>{
              if(e.status == 200){
                this.$message.success("操作成功")
                this.getList()
                this.show = false
              }
            })
          }
        }
      })
    },
    del(id){
      if(id != ""){
        request.post("/product/spec/del",{id:`${id}`}).then(e=>{
          if(e.status == 200){
            this.$message.success("删除成功")
            this.getList()
          }
        })
      }else{
        this.$message.error("未选择删除项")
      }
    },
    addSpec(){
      this.$refs.formSpec.validate((e)=>{
        if(e){
          let specTmp = this.specTmp
          let formSpec = this.formSpec
          let obj = {
            title:formSpec.title,
            list:[formSpec.val]
          }
          specTmp.push(obj)
        }
      })
    },
    addType(val,title){
      if(val != ""){
        let f = this.specTmp.find(e=>e.title == title)
        if(!f.list.find(e=>e == val)){
          f.list.push(val)
        }else{
          this.$message.error("重复添加")
        }
      }
    },
    showModal(id){
      let specData = [...this.specData]
      if(typeof(id) == "number"){
        let f = specData.find(e=>e.id == id)
        this.specTmp = f.data
        this.form = f
        this.mod = "edit"
      }else{
        this.mod = "add"
      }
      this.show = true
    },
    del_spec(index){
      let specTmp = this.specTmp
      specTmp.splice(index,1)
    },
    closeTag(name,title){
      let f = this.specTmp.find(e=>e.title == title)
      f.list = f.list.filter(e=>e != name)
    },
    close_add_spec(){
      this.show_add_spec = false
      this.$refs.formSpec.resetFields()
    }
  },
}
</script>

<style scoped>
  .product_spec .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .product_spec .container .body{
    padding: 16px;
  }
  .product_spec .container .body .btn{
    margin-top: 20px;
  }
  .product_spec .container .body .table{

  }
  .product_spec .container .table .act p {
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
  .content{
    width: 600px;
  }
  .content .icon{
    color: #515a6e;
    margin-left: 5px;
    cursor: pointer;
  }
  .content .list{
    width: 100%;
  }
  .content .tag{
    height: 22px;
    margin: 2px 4px 2px 0;
    padding: 0 8px;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    flex-wrap: nowrap;
  }
  .content .tag-dot{
    height: 32px;
    border: 1px solid #e8eaec!important;
    color: #515a6e!important;
    background: #fff!important;
    padding: 0 12px;
  }
  .content .tag .tag-dot-inner{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e8eaec;
    position: relative;
    top: 1px;
  }
  .content .tag .tag-dot-inner.act{
    background: #2d8cf0;
  }
  .content .tag .tag-text{
    color: #515a6e;
  }
  .content .tag .iconfont{
    font-size: 21px;
    line-height: normal;
    margin-left: 8px;
  }
</style>